import React, { useContext, useState, useEffect } from "react";
import axios from "axios";
import { ClientContext } from "..//../App";
import { Input, Layout, theme, Form, Button, Checkbox } from "antd";
import { useNavigate } from "react-router-dom";
import { Head } from "../Head/Head";
import { Foot } from "../Foot/Foot";
import "react-toastify/dist/ReactToastify.css";
import {
  Bounce,
  Flip,
  Slide,
  toast,
  ToastContainer,
  Zoom,
} from "react-toastify";

export const Login = () => {
  const toastId = React.useRef("");
  const navigate = useNavigate();

  const { client, theme } = useContext(ClientContext);
  const [form] = Form.useForm();

  useEffect(() => {
    const { changeMsg } = client.getProps();
    const token = client.getToken();
    if (!!token && token != "") {
      (async () => {
        const {
          data: { code, message },
        } = await client.post("/api/loginToken",{token});

        if (code == 0) {
          changeMsg({ msg: message, code });
          setTimeout(() => {
            navigate("index/info");
          }, 800);
        }else{
          changeMsg({ msg: message });
        }
      })();
    }
  }, []);

  const onFinish = async (values: any) => {
    const { changeMsg } = client.getProps();
    // 获取表单数据
    const { username, password } = form.getFieldsValue();

    // 发送请求
    const {
      code,
      message,
      data: info,
    } = await (await client.post("/api/login", { username, password })).data;

    if (code == 0) {
      // 登录成功
      client.setToken(info.token);
      client.addProps({ username });
      changeMsg({ msg: message, code });
      setTimeout(() => {
        navigate("index/info");
      }, 800);
    } else {
      // 登录失败
      changeMsg({ msg: info.reason });
      form.setFieldsValue({ password: "" });
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <>
      <Layout>
        <Head />
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600, padding: "10% 20px" }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          >
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
        <Foot />
      </Layout>
    </>
  );
};
